import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Tooltip, Form, Select, Input, Checkbox, Spin } from 'antd';
import styles from './index.less';
import qdbuttom from '@/assets/account/robotSetup/qdbuttom.png';
import qxbuttom from '@/assets/account/robotSetup/qxbuttom.png';

const Search = Input.Search;
const FormItem = Form.Item;
const { Option } = Select;
const CheckboxGroup = Checkbox.Group;

class Check extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedList: ['首页', '机器人总览'],
      indeterminate: false,
      checkAll: false,
      roleId: this.props.itemListObj.roleId,
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
  }

  onChangeCheckbox = checkedValues => {
    console.log('checked = ', checkedValues);
    // this.setState({checkedList:checkedValues})
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { itemObj } = this.props;
    console.log(itemObj);
    // 多选框参数
    return (
      <div>
        <Spin spinning={this.props.twospin}>
          <div className={styles.der}>
            <Form className="zdyfroma" layout="horizontal">
              <FormItem label="菜单名称" className={styles.wardfrom}>
                <CheckboxGroup
                  value={itemObj}
                  style={{ width: '100%' }}
                  onChange={this.onChangeCheckbox}
                >
                  <Row style={{ marginBottom: 20 }} gutter={20}>
                    <Col span={3}>
                      <Checkbox defaultChecked value="首页">
                        首页
                        </Checkbox>
                    </Col>
                    <Col span={3}>
                      <Checkbox
                        defaultChecked={true}
                        checked={true}
                        autoFocus={true}
                        value="机器人总览"
                      >
                        机器人总览
                        </Checkbox>
                    </Col>
                    <Col span={3}>
                      <Checkbox value="机器人管理">机器人管理</Checkbox>
                    </Col>
                    <Col span={3}>
                      <Checkbox value="知识库管理">知识库管理</Checkbox>
                    </Col>
                    <Col span={3}>
                      <Checkbox value="对话工坊">对话工坊</Checkbox>
                    </Col>
                    <Col span={3}>
                      <Checkbox value="通用配置">通用配置</Checkbox>
                    </Col>
                    <Col span={3}>
                      <Checkbox value="运营分析">运营分析</Checkbox>
                    </Col>
                    <Col span={3}>
                      <Checkbox value="系统管理">系统管理</Checkbox>
                    </Col>
                  </Row>
                  <Row
                    style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                    gutter={20}
                  >
                    <Col span={6} />
                    <Col span={3}>
                      <Checkbox value="机器人设置">机器人设置</Checkbox>
                    </Col>
                    <Col span={3} >
                      <Checkbox value="知识总览">知识总览</Checkbox>
                    </Col>
                    <Col span={3}>

                    </Col>
                    <Col span={3}>
                      <Checkbox value="实体管理">实体管理</Checkbox>
                    </Col>
                    <Col span={3}>
                      <Checkbox value="机器人总览分析">机器人总览分析</Checkbox>
                    </Col>
                    <Col span={3}>
                      <Checkbox value="用户管理">用户管理</Checkbox>
                    </Col>
                  </Row>
                  <Row
                    style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                    gutter={20}
                  >
                    <Col span={6} />
                    <Col span={3}>
                      <Checkbox value="协作开发">协作开发</Checkbox>
                    </Col>
                    <Col span={3}>
                      <Checkbox value="知识库分享">知识库分享</Checkbox>
                    </Col>
                    <Col span={3}>

                    </Col>
                    <Col span={3}>
                      <Checkbox value="词槽管理">词槽管理</Checkbox>
                    </Col>
                    <Col span={3}>
                      <Checkbox value="接口调用情况分析">接口调用情况分析</Checkbox>
                    </Col>
                    <Col span={3}>
                      <Checkbox value="角色管理">角色管理</Checkbox>
                    </Col>
                  </Row>
                  <Row
                    style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                    gutter={20}
                  >
                    <Col span={6} />
                    <Col span={3}>
                      <Checkbox value="部署配置">部署配置</Checkbox>
                    </Col>
                    <Col span={3}>
                      <Checkbox value="版本维护">版本维护</Checkbox>
                    </Col>
                    <Col span={3}>

                    </Col>
                    <Col span={3}>
                      <Checkbox value="接口管理">接口管理</Checkbox>
                    </Col>
                    <Col span={3}>
                      <Checkbox value="对话流程分析">对话流程分析</Checkbox>
                    </Col>
                    <Col span={3}>
                      <Checkbox value="权限管理">权限管理</Checkbox>
                    </Col>
                  </Row>
                  <Row
                    style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                    gutter={20}
                  >
                    <Col span={18}></Col>
                    <Col span={3}>
                      <Checkbox value="知识点数量分析">知识点数量分析</Checkbox>
                    </Col>
                  </Row>
                  <Row
                    style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                    gutter={20}
                  >
                    <Col span={18}></Col>
                    <Col span={3}>
                      <Checkbox value="多轮对话总体情况分析">多轮对话总体情况分析</Checkbox>
                    </Col>
                  </Row>
                  <Row
                    style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                    gutter={20}
                  >
                    <Col span={18}></Col>
                    <Col span={3}>
                      <Checkbox value="问答任务情况分析">问答任务情况分析</Checkbox>
                    </Col>
                  </Row>
                  <Row
                    style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                    gutter={20}
                  >
                    <Col span={18}></Col>
                    <Col span={3}>
                      <Checkbox value="多轮对话失败原因分析">多轮对话失败原因分析</Checkbox>
                    </Col>
                  </Row>
                  <Row
                    style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                    gutter={20}
                  >
                    <Col span={18}></Col>
                    <Col span={3}>
                      <Checkbox value="未知问题分析">未知问题分析</Checkbox>
                    </Col>
                  </Row>
                  <Row
                    style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                    gutter={20}
                  >
                    <Col span={18}></Col>
                    <Col span={3}>
                      <Checkbox value="未知问题知识点聚合分析">未知问题知识点聚合分析</Checkbox>
                    </Col>
                  </Row>
                </CheckboxGroup>
              </FormItem>
            </Form>
            <div className={styles.flex}>
              <div>
                {/*<img  src={qxbuttom} style={{ marginRight: 50 }} />*/}
                {/* <img onClick={this.operation} src={qdbuttom} /> */}
              </div>
            </div>
          </div>
        </Spin>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(Check));
